import React, { Fragment, useEffect } from 'react'
import { Carousel } from 'antd'
import { IDraggable } from '../../../../dnd/component_type'

export default function FlexPreview (props: IDraggable) {
  const { config, data, meta } = props

  useEffect(() => {
    console.log('轮播图配置变了~', config)
  }, [config])

  useEffect(() => {
    console.log('轮播图数据变了~', data)
  }, [data])

  return (
    <Fragment>
      <div { ...config.attr } style={{ ...config.style }} >
        {
          data.raw.list.map((item: any, index: number) => {
            return (
              <div key={index}>
                <img src={item.url} alt="" />
              </div>
            )
          })
        }
      </div>
    </Fragment>
  )
}